<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			a {
				text-decoration: none;
			}
			.center {
				width: 1000px;
				margin: 0 auto;
			}
			body {
				background-image: url(img/reg/bk-zhuce-1.png);
				background-repeat: no-repeat;
				background-position: center center;
			}
			.login {
				display: flex;
				background-color: #fff;
				margin-top: 50px;
			}
			.login .pic {
				width: 60%;
				position: relative;
			}
			.login .pic img{
				display: block;
				width: 50%;
				position: absolute;
				top: 50px;
			}
			.login .pic .pic1 {
				z-index: 3;
			}
			.login .pic .pic2 {
				left: 30%;
				z-index: 2;
			}
			.login .pic .pic3 {
				left: 50%;
			}
			/* 用户信息区 */
			.msg {
				color: #555;
				width: 40%;
				padding: 30px;
			}
			.msg .user-title {
				display: flex;
				align-items: center;
			}
			.msg .user-title img {
				display: block;
				width: 60px;
				height: 60px;
			}
			.msg .user-title span {
				margin-left: 30px;
				font-size: 20px;
			}
			.msg .reg {
				display: flex;
				justify-content: right;
				font-size: 14px;
				border-bottom: 1px solid #aaa;
				padding-bottom: 20px;
			}
			.msg .reg a {
				color: #5FBFFC;
			}
			.msg .form-group {
				padding: 10px;
				display: flex;
				align-items: center;
			}
			.msg .form-group label {
				width: 80px;
			}
			.msg .form-group input {
				width: 200px;
				padding: 5px 10px;
				outline: none;
			}
			.msg button {
				border: none;
				width: 100%;
				display: block;
				margin: 20px auto;
				padding: 10px 10px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="center">
			<div class="login">
				<div class="pic">
					<img src="img/reg/zhuce-image-1.png" class="pic1">
					<img src="img/reg/zhuce-image-2.png" class="pic2">
					<img src="img/reg/zhuce-image-3.png" class="pic3">
				</div>
				<div class="msg">
					<div class="user-title">
						<img src="img/login/user.png" alt="">
						<span>注&nbsp;&nbsp;册</span>
					</div>
					<div class="reg">
						<span>已有账户?</span>
						<a href="login.html">立即登录</a>
					</div>
					<div class="form-group">
						<label for="uname">用户名：</label>
						<input type="text" id="uname" placeholder="请输入用户名" value="">
					</div>
					<div class="form-group">
						<label for="upwd">密码：</label>
						<input type="password" id="upwd" placeholder="请输入密码">
					</div>
					<div class="form-group">
						<label for="email">邮箱：</label>
						<input type="text" id="email" placeholder="请输入邮箱">
					</div>
					<div class="form-group">
						<label for="phone">电话：</label>
						<input type="text" id="phone" placeholder="请输入手机号">
					</div>
					<button>提交注册信息：</button>
				</div>
			</div>
		</div>
	</body>
</html>